<!-- 批量处理 -->
<template>
  <transition>
    <div v-if="dataList.length || visible" class="g-batch-dispose">
      <div class="cancel-wrap" @click="uncheck">{{ uncheckText }}</div>
      <div class="vertical-line"></div>
      <div class="number-of-selected">已选{{ dataList.length }}条</div>
      <div class="flex flex-1">
        <div class="flex gap-x-8">
          <slot></slot>
        </div>
        <div v-if="allDisposeVisible" class="all-dispose-wrap">
          <p>共{{ total }}条数据</p>
          <div class="line"></div>
          <div class="flex gap-x-8">
            <slot name="all-dispose"></slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
  interface GBatchDisposeProps {
    visible?: boolean
    total?: number
    allDisposeVisible?: boolean
    uncheckText?: string
  }

  withDefaults(defineProps<GBatchDisposeProps>(), {
    total: 0,
    uncheckText: '取消选中'
  })
  const dataList = defineModel<(string | number)[]>('dataList', { required: true })

  const uncheck = () => {
    dataList.value = []
  }
</script>

<style lang="less" scoped>
  .g-batch-dispose {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 36px;
    width: 100%;
    height: 52px;
    background-color: #fff;
    box-shadow: 0 -1px 3px 0 rgba(37, 37, 45, 0.2);

    .cancel-wrap {
      color: #009cf8;
      cursor: pointer;
    }

    .vertical-line {
      margin: 0 32px;
      width: 1px;
      height: 36px;
      background: #e8e9eb;
    }

    .number-of-selected {
      margin-right: 32px;
      font-size: 14px;
      color: rgba(21, 23, 27, 0.95);
      font-weight: 400;
      line-height: 22px;
    }

    .all-dispose-wrap {
      display: flex;
      align-items: center;
      padding: 0 16px;
      margin-left: auto;
      height: 36px;
      background: #fafafa;
      border: 1px solid #e8e8eb;
      border-radius: 6px;

      .line {
        margin: 0 16px;
        width: 1px;
        height: 16px;
        background: #e8e9eb;
      }
    }
  }
</style>
